<template>
  <svg
    ref="svgRef"
    version="1.1"
    id="图层_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    width="330"
    height="330"
    viewBox="0 0 226.8 226.8"
    style="enable-background:new 0 0 226.8 226.8;"
    xml:space="preserve"
  >

    <g>
      <path
        :fill="svgColor"
        class="st0"
        d="M192.4,0h-158C15.4,0,0,15.4,0,34.4v158.1c0,19,15.4,34.4,34.4,34.4h158.1c19,0,34.4-15.4,34.4-34.4V34.4
		C226.8,15.4,211.4,0,192.4,0z M216.5,189.4c0,15.3-12.3,27.7-27.5,27.7H37.8c-15.2,0-27.5-12.4-27.5-27.7V96.1
		c0-30.5,24.6-55.3,55-55.3H189c15.2,0,27.5,12.4,27.5,27.7V189.4z"
      />
      <path
        class="st1"
        :fill="svgColor"
        d="M201.3,214.8H101c-9.7,0-17.7-8-17.7-17.8s7.9-17.8,17.7-17.8h100.3c9.7,0,17.7,8,17.7,17.8
		S211.1,214.8,201.3,214.8z M101,180.3c-9.2,0-16.7,7.5-16.7,16.8s7.5,16.8,16.7,16.8h100.3c9.2,0,16.7-7.5,16.7-16.8
		s-7.5-16.8-16.7-16.8H101z"
      />
      <path
        class="st0"
        :fill="svgColor"
        d="M99,182.5h100.3c9.5,0,17.2,7.7,17.2,17.3s-7.7,17.3-17.2,17.3H99c-9.5,0-17.2-7.7-17.2-17.3
		S89.5,182.5,99,182.5z"
      />
      <path
        class="st0"
        :fill="svgColor"
        d="M52.6,216.8h-7.8c-9.5,0-17.3-7.7-17.3-17.3l0,0c0-9.5,7.7-17.3,17.3-17.3h7.8c9.5,0,17.3,7.7,17.3,17.3l0,0
		C69.8,209.1,62.1,216.8,52.6,216.8z"
      />
    </g>
    <g>
      <rect
        y="0"
        class="st2"
        width="226.8"
        height="226.8"
      />
    </g>
    <g>
      <rect
        y="0"
        class="st2"
        width="226.8"
        height="226.8"
      />
    </g>
    <g>
      <rect
        y="0"
        class="st2"
        width="226.8"
        height="226.8"
      />
    </g>
    <g>
      <g>
        <path
          class="st3"
          d="M81.8,199.8c0-3.6,1.1-7,3-9.8c2.7-6.3,9-10.7,16.2-10.7h100.3c6.4,0,12,3.5,15.1,8.6V68.4
			c0-15.3-12.3-27.7-27.5-27.7H65.3c-30.4,0-55,24.8-55,55.3v93.3c0,15.3,12.3,27.7,27.5,27.7H189c0.5,0,1,0,1.5,0H98.9
			C89.5,217,81.8,209.3,81.8,199.8z M69.9,199.5c0,9.5-7.7,17.3-17.3,17.3h-7.8c-9.5,0-17.3-7.7-17.3-17.3l0,0
			c0-9.5,7.7-17.3,17.3-17.3h7.8C62.1,182.3,69.9,190,69.9,199.5L69.9,199.5z"
        />
        <path
          class="st3"
          d="M215.8,195.3c0.4-1.7,0.6-3.5,0.6-5.3c-2.7-5.7-8.4-9.7-15.1-9.7H101c-5.1,0-9.7,2.3-12.7,6
			c2.9-2.3,6.6-3.8,10.7-3.8h100.3C207.2,182.5,213.9,187.9,215.8,195.3z"
        />
      </g>
      <g>
        <path
          class="st4"
          d="M189,217.4H37.8c-15.3,0-27.8-12.6-27.8-28V37.3c0-15.4,12.5-28,27.8-28H189c15.3,0,27.8,12.6,27.8,28v152.1
			C216.8,204.9,204.3,217.4,189,217.4z M37.8,10c-15,0-27.1,12.3-27.1,27.3v152.1c0,15.1,12.2,27.3,27.1,27.3H189
			c15,0,27.1-12.3,27.1-27.3V37.3c0-15.1-12.2-27.3-27.1-27.3H37.8z"
        />
      </g>
    </g>
    <g>
      <path
        class="st5"
        d="M193,193.1l-0.1,1.1h-2.5l-0.1,0.5h1.1c0.4,0,0.7,0.1,0.9,0.3s0.3,0.4,0.3,0.6c0,0.2-0.1,0.5-0.3,0.7
		c-0.5,0.6-1.3,1.3-2.7,1.9c-1.2,0.6-2.6,1.2-4.2,1.7l-0.9-1.1c1.1-0.3,2.1-0.6,3-1l-1.1-0.8l-0.3,0.4h-1.6c0.9-1.2,1.7-2.3,2.3-3.4
		h1.6c-0.1,0.1-0.1,0.2-0.2,0.4c0,0.1-0.1,0.2-0.3,0.4h0.8l0.2-2.4h1.5l-0.1,0.7L193,193.1L193,193.1z M193.3,198.1l-0.8-0.9
		c0.7-0.2,1.4-0.5,2.1-0.8l-1.4-0.9l1-0.9l1.8,1.1c0.6-0.3,1.1-0.7,1.4-1.1c0.1-0.1,0.2-0.2,0.2-0.3c0,0,0-0.1-0.1-0.1s-0.2,0-0.3,0
		h-3.9l0.2-1.3h4.9c0.4,0,0.8,0.1,1,0.3c0.3,0.2,0.4,0.4,0.4,0.6c0,0.2-0.1,0.5-0.3,0.8c-0.5,0.7-1.2,1.4-2.2,2
		c1,0.6,1.9,1.2,2.6,1.8l-1.3,1c-0.8-0.6-1.8-1.3-2.8-2c-0.5,0.2-1,0.4-1.7,0.7h0.2c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.5,0.2,0.8,0.4
		l4.5,2.7l-1.3,1l-1.8-1.1c0.1,0.2,0.1,0.5,0.1,0.8l-0.3,2.5h1.5c-0.6,0.5-1.4,1.1-2.2,1.7c0.8,0.3,1.7,0.6,2.5,1l-1.3,1
		c-1.5-0.6-3.4-1.3-5.6-2.1l-0.1,1.3c-0.6,0.2-1.8,0.4-3.5,0.6c-0.3,0-0.5,0.1-0.7,0.1c-0.3,0-0.6-0.1-0.8-0.2
		c-0.2-0.1-0.3-0.4-0.3-0.7c0-0.1,0-0.2,0-0.3l0.6-4.8c0-0.2,0.1-0.4,0.1-0.6l-1.5,0.9l-1.6-0.8l5.4-3c0.5-0.3,0.9-0.4,1.2-0.4h2.7
		V198.1z M187.3,196L187.3,196l1.7,1.2c0.5-0.2,0.9-0.6,1.5-0.9c0.1-0.1,0.1-0.1,0.1-0.2c0-0.1-0.1-0.1-0.4-0.1H187.3z M190.9,199.4
		l-2.1,1.2h3.1l-0.4-0.9h1.6l0.4,0.9h2.5c0,0,0.1,0,0.3,0l-1.9-1.2H190.9z M195.7,201.7h-6.8l-0.1,0.5h6.8L195.7,201.7z
		 M195.5,203.2h-6.8l-0.1,0.5h6.8L195.5,203.2z M188.7,206.5c0.4-0.1,0.9-0.1,1.4-0.3c0.4-0.1,0.6-0.1,0.8-0.2l0.8-0.2l-0.8-0.3
		l-0.8-0.3l0.8-0.6h-2.4l-0.2,1.5v0.1c0,0.1,0,0.1,0.1,0.1C188.5,206.5,188.6,206.5,188.7,206.5z M194.9,205.7
		c0.5-0.3,0.9-0.6,1.3-0.9h-3.9L194.9,205.7z"
      />
    </g>
    <g>
      <path
        class="st5"
        d="M181.9,194l-0.2,1.6h-6.2l-0.2,1.8h4c0.4,0,0.8,0.1,1,0.3s0.3,0.5,0.3,0.9c0,0.1,0,0.2,0,0.3l-0.5,4h-11.6
		l0.5-4.4c0.1-0.4,0.2-0.7,0.4-0.9s0.5-0.3,0.9-0.3h3.2l0.6-4.9h1.8l-0.2,1.5L181.9,194L181.9,194z M178.7,198.9h-8l-0.3,2.4h8
		L178.7,198.9z M166.5,207.8l1.6-3.9h1.8l-1.5,3.9H166.5z M178.4,203.9h1.7l1.4,3.9h-1.8L178.4,203.9z M171.2,204h1.7l0.3,3.8h-1.7
		L171.2,204z M174.8,204h1.7l0.8,3.8h-1.7L174.8,204z"
      />
    </g>
    <g>
      <path
        class="st5"
        d="M160.7,192.5l-0.3,2.7h2.2c1,0,1.5,0.6,1.4,1.8c-0.3,3-0.6,6.1-1.2,9.5c-0.1,0.4-0.2,0.7-0.4,1
		c-0.2,0.2-0.5,0.3-1,0.3c-0.2,0-0.3,0-0.4,0c-0.9-0.1-1.7-0.3-2.3-0.6l0.2-1.6l0.9,0.3c0.3,0.1,0.5,0.2,0.9,0.2c0.1,0,0.2,0,0.2,0
		c0.1,0,0.2,0,0.2-0.1s0.1-0.2,0.1-0.3c0.1-0.8,0.3-2.3,0.6-4.3c0.2-1.3,0.3-2.8,0.5-4.5h-2.2l-0.2,1.8c-0.4,3.8-1.5,6.9-3.3,9.3
		l-1.8-0.5c1-1.4,1.8-2.8,2.3-4.3c0.5-1.3,0.8-2.8,1-4.6l0.2-1.8h-1.9l0.2-1.7h1.9l0.3-2.7h1.9V192.5z M155.9,205.7
		c-1.1,0.3-2.3,0.6-3.6,0.8c-0.3,0-0.4,0.1-0.5,0.1c-1.3,0.3-2.4,0.4-3.3,0.6l0.2-1.6h0.3l0.3-0.1l1.3-11c0.1-0.5,0.2-0.8,0.4-1
		c0.3-0.2,0.6-0.3,1.2-0.3h2.6c0.5,0,0.8,0.1,1.1,0.4c0.3,0.2,0.4,0.6,0.4,1c0,0.1,0,0.2,0,0.3l-1.1,9.5c0.3-0.1,0.6-0.1,0.9-0.3
		L155.9,205.7z M154.6,194.6h-2.4l-0.3,2.3h2.4L154.6,194.6z M154.2,198.5h-2.4l-0.3,2.2h2.4L154.2,198.5z M150.9,205.1l1.3-0.3
		c0.3-0.1,0.8-0.1,1.3-0.3l0.3-2.5h-2.5L150.9,205.1z"
      />
    </g>
    <g>
      <path
        class="st5"
        d="M143.7,207.7h-11.5l1.4-12c0-0.4,0.2-0.8,0.5-1c0.3-0.3,0.6-0.4,1.1-0.4h2.4l0.7-1.9h1.9l-0.8,1.9h4.2
		c0.4,0,0.8,0.2,1.1,0.5s0.4,0.8,0.4,1.3L143.7,207.7z M143.4,195.8h-8.1l-0.3,2.3h8.1L143.4,195.8z M142.9,199.6h-8.1l-0.3,2.4h8.1
		L142.9,199.6z M134.1,206.2h8.1l0.3-2.6h-8.1L134.1,206.2z"
      />
    </g>
    <g>
      <path
        class="st5"
        d="M121.4,200.4c-0.8,0-1.3-0.3-1.3-1c0-0.2,0-0.4,0.1-0.5l0.9-3.3h1.6l-0.8,3.3h3.1l0.9-4.3h-5.3l0.2-1.5h5.4
		c0.5,0,0.9,0.1,1.1,0.3c0.3,0.2,0.4,0.5,0.4,0.9c0,0.2,0,0.3-0.1,0.5l-0.9,4.1c0.5,0,0.9,0.2,1.1,0.4c0.2,0.3,0.3,0.6,0.3,1
		c0,0.3,0,0.7-0.1,1.2c0,0.3-0.1,0.5-0.1,0.6c-0.2,1.5-0.3,2.6-0.4,3.2l-0.1,0.4c-0.1,0.6-0.2,1-0.3,1.3c-0.1,0.3-0.3,0.5-0.5,0.7
		s-0.6,0.3-1.1,0.3c-0.4,0-1-0.1-1.9-0.3c-0.4-0.1-1-0.2-1.6-0.4l0.2-1.7c0.6,0.2,1.6,0.4,2.9,0.6h0.1c0.1,0,0.2,0,0.2-0.1
		s0.1-0.2,0.1-0.3c0.3-1.5,0.5-3.3,0.6-5.3L121.4,200.4L121.4,200.4z M118.5,206.8h-4.8l0.6-5.3h-1.6c0.7-1.3,1.3-2.5,1.8-3.5
		c0.4-0.8,0.8-1.8,1.3-3.1H114l0.2-1.6h5.8l-0.2,1.6h-2.3c-0.4,1.1-0.8,2-1.2,2.8h1.8c0.8,0,1.2,0.4,1.2,1.2c0,0.1,0,0.3,0,0.5
		L118.5,206.8z M115.4,205.3h1.7l0.7-6.1H116L115.4,205.3z M125.3,202.2l-0.2,1.5h-5.6l0.2-1.5H125.3z"
      />
    </g>
    <g>
      <path
        class="st5"
        d="M97.3,207.9c-0.7-0.1-1.4-0.3-2.1-0.6l0.2-1.7c0.5,0.2,1,0.4,1.5,0.5c0,0,0.1,0,0.2,0s0.1,0,0.1-0.1
		c0,0,0.1-0.1,0.1-0.2l0.5-3.9c-0.5,0.2-1.3,0.4-2.2,0.6l0.2-1.9c0.7-0.2,1.5-0.4,2.2-0.6l0.4-3.3h-2.3l0.2-1.7h2.3l0.3-2.7h1.7
		l-0.3,2.7h2l-0.2,1.7h-2l-0.3,2.8c0.8-0.2,1.5-0.5,2.1-0.7l-0.2,1.8c-0.3,0.1-0.6,0.2-1,0.3l-1.1,0.4l-0.6,5.2
		c-0.1,0.4-0.2,0.8-0.4,1c-0.2,0.2-0.5,0.4-0.9,0.4C97.4,207.9,97.3,207.9,97.3,207.9z M101.1,207.4l0.2-1.6h6.2l0.6-5h-5.6l0.2-1.6
		h5.6l0.5-4.2h-6.1l0.2-1.6h6.2c1.1,0,1.6,0.6,1.5,1.7l-1.5,12.3L101.1,207.4L101.1,207.4z"
      />
    </g>
    <g>
      <rect
        y="0"
        class="st2"
        width="226.8"
        height="226.8"
      />
    </g>
    <g>
      <rect
        y="0"
        class="st2"
        width="226.8"
        height="226.8"
      />
    </g>
    <path
      class="st6"
      :fill="svgColor"
      d="M55.2,213.7h-7.8c-9.5,0-17.3-7.7-17.3-17.3l0,0c0-9.5,7.7-17.3,17.3-17.3h7.8c9.5,0,17.3,7.7,17.3,17.3l0,0
	C72.5,206,64.8,213.7,55.2,213.7z"
    />
    <g>
      <g>
        <defs>
          <rect
            id="SVGID_1_"
            y="0"
            width="226.8"
            height="226.8"
          />
        </defs>
        <clipPath id="SVGID_00000153699765075439796810000008525797771121969593_">
          <use
            xlink:href="#SVGID_1_"
            style="overflow:visible;"
          />
        </clipPath>
        <g style="clip-path:url(#SVGID_00000153699765075439796810000008525797771121969593_);">
          <g>
            <path
              class="st8"
              d="M63.5,165.2c-0.4,0.1-0.8,0.2-1.1,0.3v2.3c0,0.4-0.1,0.5-0.3,0.6s-0.6,0.1-1.1,0.1c0-0.2-0.1-0.4-0.2-0.6
					c0.4,0,0.7,0,0.8,0s0.2,0,0.2-0.2v-2.2c-0.4,0.1-0.8,0.2-1.1,0.3l-0.2-0.6c0.4-0.1,0.8-0.2,1.3-0.3v-1.8h-1.2v-0.6h1.2v-1.6h0.6
					v1.6h1.1v0.6h-1.1v1.7l1.1-0.3V165.2z M67.6,161.8v6.8H67V168h-3.4v-0.6H67V165h-3.2v-0.6H67v-2h-3.4v-0.6L67.6,161.8
					L67.6,161.8z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M68.8,161.5h2.8v0.6h-1.2c-0.1,0.7-0.3,1.4-0.5,2h1.5v3.5h-1.5v0.7h-0.5v-3c-0.1,0.2-0.3,0.5-0.4,0.7
					c0-0.1-0.2-0.5-0.3-0.7c0.6-0.8,1-1.9,1.2-3.2h-1L68.8,161.5L68.8,161.5z M70.9,164.6h-1v2.4h1V164.6z M74.9,166.9h-3.1v-0.6
					h3.1V166.9z M76.1,164.7c0,0,0,0.2,0,0.3c-0.2,2.2-0.4,3.1-0.7,3.4c-0.2,0.2-0.3,0.2-0.6,0.2c-0.2,0-0.6,0-1,0
					c0-0.2-0.1-0.4-0.2-0.6c0.4,0,0.8,0,0.9,0s0.2,0,0.3-0.1c0.2-0.2,0.4-0.9,0.5-2.8H72c0.1-0.7,0.2-1.8,0.3-2.6h0.6
					c0,0.6-0.1,1.4-0.2,2h1.7c0.1-0.8,0.2-1.8,0.3-2.6H72v-0.6h2.9H75h0.4c-0.1,0.9-0.2,2.1-0.3,3.1h1V164.7z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M84.5,163.3v0.6h-6c0,1.4-0.1,3.4-1.1,4.7c-0.1-0.1-0.4-0.3-0.5-0.4c0.9-1.3,1-3,1-4.3v-2.1
					c1.9-0.1,4.2-0.4,5.5-0.7l0.5,0.5c-1.4,0.3-3.5,0.6-5.4,0.7v1H84.5z M79.2,165.1h4.6v3.5h-0.6v-0.4h-3.4v0.4h-0.6V165.1z
					 M79.8,165.7v1.9h3.4v-1.9H79.8z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M92.6,162.3h-1v5.5c0,0.4-0.1,0.7-0.4,0.8s-0.9,0.1-1.7,0.1c0-0.2-0.2-0.5-0.3-0.7c0.7,0,1.3,0,1.5,0
					s0.2-0.1,0.2-0.2v-5.5h-5.7v-0.6h7.3L92.6,162.3L92.6,162.3z M86.8,166.6v0.7h-0.6v-3.7h3.3v3.1h-2.7V166.6z M86.8,164.1v1.9H89
					v-1.9H86.8z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M95.3,167c0.2,0.1,0.3,0.3,0.6,0.4c0.5,0.3,1.2,0.4,2.2,0.4s2.2-0.1,3-0.2c-0.1,0.2-0.2,0.5-0.2,0.6
					c-0.6,0-2,0.1-2.8,0.1c-1,0-1.7-0.1-2.3-0.5c-0.3-0.2-0.6-0.5-0.8-0.5c-0.3,0-0.7,0.5-1.1,1.1l-0.4-0.6c0.4-0.5,0.9-0.8,1.2-1
					v-2.4h-1.1V164h1.7L95.3,167L95.3,167z M95.1,163c-0.3-0.4-0.8-1-1.3-1.4l0.4-0.3c0.5,0.4,1,1,1.3,1.3L95.1,163z M97.6,165.2
					c-0.1,0.8-0.4,1.6-1.2,2.1c-0.1-0.1-0.3-0.3-0.4-0.4c0.6-0.5,0.9-1.1,1-1.7h-1.1v-0.6h1.2c0-0.2,0-0.3,0-0.5v-1h-1.2v-0.6h1.2
					v-1.3h0.6v1.3H99v-1.3h0.6v1.3h1.1v0.6h-1.1v1.5h1.2v0.6h-1.2v2.1H99v-2.1L97.6,165.2L97.6,165.2z M97.7,164.1
					c0,0.2,0,0.3,0,0.5H99v-1.5h-1.4L97.7,164.1L97.7,164.1z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M104.2,161.2c2.6,1.9,2.4,5,5.1,6.6c-0.1,0.2-0.3,0.5-0.3,0.7c-1.9-1.1-2.4-3-3.4-4.6
					c-0.6,2.2-1.7,3.7-3.3,4.7c-0.1-0.1-0.4-0.4-0.6-0.5c1.8-1,2.9-2.6,3.4-5c-0.4-0.5-0.8-1-1.3-1.3L104.2,161.2z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M112,163.2c-0.3,1.2-0.7,2.7-1.5,3.6c-0.1-0.1-0.4-0.3-0.6-0.3c0.7-0.9,1.2-2.3,1.4-3.4L112,163.2z
					 M114.1,161.2v6.6c0,0.5-0.1,0.6-0.4,0.7c-0.3,0.1-0.8,0.1-1.6,0.1c0-0.2-0.2-0.5-0.3-0.6c0.6,0,1.2,0,1.4,0
					c0.2,0,0.2-0.1,0.2-0.2v-6.6H114.1z M116,163.1c0.7,1.2,1.4,2.7,1.6,3.7L117,167c-0.2-1-0.9-2.5-1.6-3.7L116,163.1z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M120.7,166.1c-0.1-0.3-0.4-0.8-0.6-1.2v3.7h-0.6v-3.5c-0.3,0.8-0.6,1.6-1,2c-0.1-0.2-0.2-0.4-0.3-0.6
					c0.5-0.6,1-1.7,1.2-2.6h-1.1v-0.6h1.2V162c-0.3,0.1-0.6,0.1-0.9,0.2c0-0.1-0.1-0.3-0.2-0.5c0.8-0.1,1.7-0.4,2.2-0.6l0.4,0.5
					c-0.3,0.1-0.6,0.2-0.9,0.3v1.5h1v0.6h-1v0.2c0.2,0.3,0.9,1.2,1,1.4L120.7,166.1z M125.7,167.8v0.6h-4.8v-0.6h2.2v-1.1h-1.6v-0.6
					h1.6V165h-1.8v-0.6h4.2v0.6h-1.8v1.1h1.6v0.6h-1.6v1.1H125.7z M125.2,163.8h-3.8v-2.4h3.8V163.8z M124.6,161.9H122v1.4h2.6
					V161.9z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M133.9,162v0.6h-6.2v1.7c0,1.3-0.1,3.2-0.8,4.4c-0.1-0.1-0.4-0.3-0.5-0.3c0.7-1.2,0.7-2.8,0.7-4V162h3.3
					c-0.1-0.2-0.3-0.6-0.4-0.8l0.6-0.2c0.2,0.3,0.4,0.7,0.5,1H133.9z M133.4,165.2l0.4,0.2c-0.4,0.6-0.9,1.3-1.3,1.7l-0.5-0.2
					c0.3-0.3,0.6-0.6,0.8-1H131v2.2c0,0.4-0.1,0.5-0.4,0.6c-0.3,0.1-0.8,0.1-1.5,0.1c0-0.2-0.1-0.4-0.2-0.6c0.6,0,1.2,0,1.3,0
					c0.2,0,0.2,0,0.2-0.2v-2.2H128v-0.5h2.9c-0.5-0.3-1.2-0.6-1.7-0.8l0.4-0.4c0.4,0.2,0.8,0.3,1.2,0.5c0.5-0.2,0.9-0.6,1.3-0.9
					h-3.6v-0.5h4.1h0.1l0.4,0.3c-0.5,0.5-1.2,1-1.9,1.4c0.2,0.1,0.5,0.2,0.6,0.3l-0.1,0.1L133.4,165.2L133.4,165.2z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M136.5,167c0.2,0.1,0.3,0.3,0.6,0.4c0.5,0.3,1.2,0.4,2.2,0.4s2.2-0.1,3-0.2c-0.1,0.2-0.2,0.5-0.2,0.6
					c-0.6,0-2,0.1-2.8,0.1c-1,0-1.7-0.1-2.3-0.5c-0.3-0.2-0.6-0.5-0.8-0.5c-0.3,0-0.7,0.5-1.1,1.1l-0.4-0.6c0.4-0.5,0.9-0.8,1.2-1
					v-2.4h-1.1V164h1.7L136.5,167L136.5,167z M136.3,163c-0.3-0.4-0.8-1-1.3-1.4l0.4-0.3c0.5,0.4,1,1,1.3,1.3L136.3,163z
					 M138.8,165.2c-0.1,0.8-0.4,1.6-1.2,2.1c-0.1-0.1-0.3-0.3-0.4-0.4c0.6-0.5,0.9-1.1,1-1.7h-1.1v-0.6h1.2c0-0.2,0-0.3,0-0.5v-1
					h-1.2v-0.6h1.2v-1.3h0.6v1.3h1.4v-1.3h0.6v1.3h1.1v0.6h-1.1v1.5h1.2v0.6h-1.2v2.1h-0.6v-2.1L138.8,165.2L138.8,165.2z
					 M138.9,164.1c0,0.2,0,0.3,0,0.5h1.4v-1.5h-1.4V164.1z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M145.7,163c-0.3,0.4-0.6,0.8-0.9,1.3v4.4h-0.6V165c-0.3,0.3-0.6,0.6-0.9,0.9c-0.1-0.1-0.3-0.4-0.4-0.5
					c0.8-0.6,1.7-1.6,2.3-2.5L145.7,163z M145.4,161.3c-0.5,0.7-1.4,1.5-2.1,2.1c-0.1-0.1-0.3-0.4-0.4-0.5c0.7-0.5,1.5-1.2,1.9-1.8
					L145.4,161.3z M150.4,164.4h-1.2v3.4c0,0.4-0.1,0.6-0.4,0.7c-0.3,0.1-0.7,0.1-1.5,0.1c0-0.2-0.1-0.4-0.2-0.6c0.6,0,1.1,0,1.3,0
					s0.2,0,0.2-0.2v-3.4h-2.8v-0.6h4.6L150.4,164.4L150.4,164.4z M150.2,162.2h-4v-0.6h4V162.2z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M151.2,168.4c0.4-0.4,0.9-1,1.1-1.7l0.6,0.1c-0.3,0.6-0.7,1.3-1.1,1.8L151.2,168.4z M157.7,166.2h-5.5v-2.6
					h2.4v-2.5h0.6v0.9h3.1v0.6h-3.1v1h2.5V166.2z M157.1,164.2h-4.3v1.5h4.3V164.2z M154.2,166.9c0.1,0.5,0.2,1.2,0.2,1.6l-0.6,0.1
					c0-0.4-0.1-1.1-0.2-1.6L154.2,166.9z M155.9,166.8c0.3,0.5,0.5,1.2,0.6,1.6l-0.6,0.1c-0.1-0.4-0.3-1.1-0.6-1.6L155.9,166.8z
					 M157.5,166.7c0.4,0.5,0.9,1.2,1.1,1.7l-0.6,0.2c-0.2-0.5-0.6-1.2-1.1-1.7L157.5,166.7z"
            />
          </g>
          <g>
            <path
              class="st8"
              d="M160.8,162.7c-0.3,0.3-0.6,0.6-1,0.9c-0.1-0.1-0.2-0.3-0.3-0.3c0.6-0.3,1-0.8,1.3-1.2l0.5,0.1
					c0,0.1-0.1,0.1-0.1,0.2h0.2v-1.2h0.5v0.4h1.4v0.4h-1.4v0.4h0.8h0.1l0.4,0.2c-0.6,1.2-1.9,1.9-3.1,2.3c-0.1-0.1-0.2-0.3-0.3-0.4
					c0.5-0.1,0.9-0.3,1.4-0.6c-0.2-0.1-0.4-0.3-0.6-0.4l0.3-0.3c0.2,0.1,0.5,0.3,0.7,0.4c0.4-0.2,0.7-0.5,0.9-0.8L160.8,162.7
					L160.8,162.7z M163.4,167c0.4,0.1,0.9,0.3,1.4,0.5c0.3-0.3,0.7-0.6,0.9-0.8l0.5,0.3c-0.3,0.3-0.6,0.5-0.9,0.7
					c0.4,0.2,0.8,0.3,1.1,0.5l-0.3,0.4c-0.7-0.4-2-0.9-3-1.3L163.4,167h-1.8v0.9l1.8-0.3c0,0.1,0,0.3,0,0.5
					c-2.1,0.3-2.4,0.4-2.5,0.5c0-0.1-0.1-0.4-0.2-0.5c0.1-0.1,0.4-0.2,0.4-0.5v-2.3c-0.4,0.2-0.8,0.3-1.2,0.4
					c-0.1-0.1-0.2-0.4-0.3-0.5c1.4-0.4,3-1.1,3.7-2l0.5,0.2c-0.1,0.1-0.1,0.1-0.2,0.2c0.8,0.7,2.3,1.2,3.5,1.5
					c-0.1,0.1-0.3,0.3-0.4,0.5c-0.4-0.1-0.8-0.2-1.2-0.4v1.8L163.4,167L163.4,167z M165.1,165.1c-0.7-0.3-1.4-0.7-1.9-1.1
					c-0.5,0.4-1,0.8-1.7,1.1h1.6c-0.1-0.2-0.2-0.3-0.4-0.5l0.5-0.1c0.2,0.2,0.3,0.4,0.5,0.6H165.1z M161.6,165.9h3.2v-0.4h-3.2
					V165.9z M161.6,166.7h3.2v-0.4h-3.2V166.7z M163.9,162.2c0.4,0.2,0.8,0.4,1.1,0.6c0.3-0.2,0.6-0.5,0.8-0.8h-2.2v-0.4h2.5h0.1
					l0.3,0.2c-0.2,0.6-0.6,1.1-1,1.4c0.4,0.3,0.8,0.5,1.1,0.8l-0.4,0.4c-0.3-0.2-0.7-0.5-1.1-0.8c-0.3,0.2-0.7,0.4-1,0.5
					c-0.1-0.1-0.2-0.3-0.3-0.4c0.3-0.1,0.6-0.2,0.9-0.4c-0.3-0.2-0.7-0.4-1-0.5L163.9,162.2z"
            />
          </g>
        </g>
      </g>
    </g>

    <image
      x="65px"
      y="50px"
      width="100px"
      height="100px"
      :href="url"
    />
    <!-- :y="165 + (textSize * 0.5)" -->
    <foreignObject
      x="0"
      y="10px"
      width="100%"
      height="30px"
    >
      <div class="text-container">
        <p :style="{ fontSize: textSize + 'px', color: textColor }">{{ textContent }}</p>
      </div>
    </foreignObject>

    <foreignObject
      x="26px"
      y="180px"
      width="45px"
      height="38px"
    >

      <p
        class="deskCodeClass"
        :style="{ fontSize: deskCodeTextSize + 'px', color: deskCodeColor}"
      >{{ desktopName }}</p>

    </foreignObject>
  </svg>
</template>

<script>
export default {
  name: 'qrSvg',
  props: {
    svgColor: {
      type: String,
      default: () => '#FF9100'
    },
    url: {
      type: String,
      default: () => require('../../../../assets/img/qr-code-example.png')
    },
    textSize: {
      type: Number,
      default: () => 18
    },
    textColor: {
      type: String,
      default: () => '#fff'
    },
    textContent: {
      type: String,
      default: () => ''
    },
    desktopName: {
      type: String,
      default: () => ''
    },
    deskCodeTextSize: {
      type: Number,
      default: () => 18
    },
    deskCodeColor: {
      type: String,
      default: () => '#fff'
    },
  }
}
</script>

<style lang="scss" scoped>
.st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
}

.st2 {
  fill: none;
}

.st3 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
}

.st4 {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.st5 {
  fill: #ffffff;
}

.st6 {
  opacity: 0.14;
  fill-rule: evenodd;
  clip-rule: evenodd;
  enable-background: new;
}

.st7 {
  clip-path: url(#SVGID_00000030468056956400774940000007429727844728456576_);
}

.st8 {
  fill: #989898;
}
.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  height: 30px;
}
.text-container p {
  line-height: 30px;
  margin: 0;
}
.deskCodeClass {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
</style>